<template>
  <div class="admin-dashboard">
    <!-- 统计卡片区域 -->
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card class="stat-card" :body-style="{ padding: '20px' }">
          <div class="stat-header">
            <div class="stat-title">活动统计</div>
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ stats.activityCount }}</div>
            <div class="stat-detail">
              <el-tag type="success">进行中: {{ stats.activeActivityCount }}</el-tag>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="8">
        <el-card class="stat-card" :body-style="{ padding: '20px' }">
          <div class="stat-header">
            <div class="stat-title">课程统计</div>
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ stats.courseCount }}</div>
            <div class="stat-detail">
              <el-tag type="success">进行中: {{ stats.activeCourseCount }}</el-tag>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="8">
        <el-card class="stat-card" :body-style="{ padding: '20px' }">
          <div class="stat-header">
            <div class="stat-title">学生统计</div>
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ stats.studentCount }}</div>
            <div class="stat-detail">
              <el-tag type="warning">新生: {{ stats.newStudentCount }}</el-tag>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 数据可视化区域 -->
    <el-row :gutter="20" style="margin-top: 20px">
      <el-col :span="16">
        <el-card class="chart-card">
          <div class="chart-title">活动趋势</div>
          <div class="chart-container">
            <v-chart :option="activityTrendOption" autoresize />
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="chart-card">
          <div class="chart-title">学生分布</div>
          <div class="chart-container">
            <v-chart :option="studentDistributionOption" autoresize />
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 快捷操作区 -->
    <el-card class="quick-actions" :body-style="{ padding: '20px' }">
      <div class="section-title">快捷操作</div>
      <div class="quick-links">
        <router-link to="/admin/activity/add" class="quick-link">
          <i class="el-icon-plus"></i>
          新建活动
        </router-link>
        <div class="quick-link" @click="goToCreateClass">
          <i class="el-icon-plus"></i>
          新建教学班
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart, PieChart } from 'echarts/charts'
import {
  GridComponent,
  TooltipComponent,
  LegendComponent,
  TitleComponent
} from 'echarts/components'
import VChart from 'vue-echarts'

use([
  CanvasRenderer,
  LineChart,
  PieChart,
  GridComponent,
  TooltipComponent,
  LegendComponent,
  TitleComponent
])

export default {
  name: 'AdminDashboard',
  components: {
    VChart
  },
  data() {
    return {
      stats: {
        activityCount: 0,
        activeActivityCount: 0,
        courseCount: 0,
        activeCourseCount: 0,
        studentCount: 0,
        newStudentCount: 0
      },
      activityTrendOption: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: [],
          axisLabel: {
            rotate: 45
          }
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '活动数量',
            type: 'line',
            data: [],
            smooth: true,
            lineStyle: {
              width: 3,
              color: '#6366f1'
            },
            areaStyle: {
              opacity: 0.3,
              color: '#6366f1'
            },
            itemStyle: {
              color: '#6366f1'
            }
          }
        ]
      },
      studentDistributionOption: {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '学生分布',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '20',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 0, name: '新生' },
              { value: 0, name: '老生' }
            ]
          }
        ]
      }
    }
  },
  methods: {
    goToCreateClass() {
      // 跳转到教学班管理页面并传递参数
      this.$router.push({
        path: '/admin/class',
        query: { showCreate: 'true' }
      });
    },
    async fetchStats() {
      try {
        const { data } = await this.$axios.get('/admin/dashboard/stats', {
          headers: {
            Authorization: localStorage.getItem("token")
          }
        })
        this.stats = data.data
        this.updateChartData(data.data)
      } catch (error) {
        console.error('获取统计数据失败:', error)
        this.$message.error('获取统计数据失败')
      }
    },
    updateChartData(data) {
      // 更新活动趋势图数据
      if (data.activityTrend) {
        this.activityTrendOption.xAxis.data = data.activityTrend.map(item => item.month)
        this.activityTrendOption.series[0].data = data.activityTrend.map(item => item.count)
      }

      // 更新学生分布饼图数据
      this.studentDistributionOption.series[0].data = [
        { value: data.newStudentCount, name: '新生' },
        { value: data.studentCount - data.newStudentCount, name: '老生' }
      ]
    }
  },
  mounted() {
    this.fetchStats()
  }
}
</script>

<style scoped>
.admin-dashboard {
  padding: 20px;
  background-color: #f0f2f5;
  min-height: calc(100vh - 60px);
}

.stat-card {
  height: 180px;
  transition: all 0.3s;
  border-radius: 12px;
  border: none;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.1);
}

.stat-header {
  margin-bottom: 20px;
}

.stat-title {
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
}

.stat-content {
  text-align: center;
}

.stat-number {
  font-size: 36px;
  font-weight: bold;
  color: #6366f1;
  margin-bottom: 15px;
}

.stat-detail {
  color: #666;
}

.chart-card {
  margin-bottom: 20px;
  border-radius: 12px;
  border: none;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

.chart-title {
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 20px;
  padding: 20px 20px 0;
}

.chart-container {
  height: 400px;
  padding: 20px;
}

.quick-actions {
  border-radius: 12px;
  border: none;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 20px;
}

.quick-links {
  display: flex;
  gap: 20px;
}

.quick-link {
  display: flex;
  align-items: center;
  padding: 12px 24px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: white;
  text-decoration: none;
  border-radius: 8px;
  transition: all 0.3s ease;
  font-weight: 500;
}

.quick-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.quick-link i {
  margin-right: 8px;
  font-size: 18px;
}

:deep(.el-card__body) {
  height: 100%;
}
</style>